<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Widgets - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li class="active"><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li><a href="form-elements.html">Elements</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!--/ nav -->
            </div><!--/ side left-->
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header no-border">
                    <!-- content title-->
                    <div class="page-header"><h1><i class="aweso-magic"></i> Widget</h1></div>
                    
                    <!-- header extra -->
                    <ul class="header-ext">
                        <li>
                            <span data-chart="sparklines" data-height="32px" data-color="#76608A">4,6,8,6,9,7,8,6,7,6,7,5,9,8,7,9,5,7,8,7</span>
                            <div class="header-ext-text color-mauve"><span class="muted">Traffic</span> 76,567</div>
                        </li>
                        <li>
                            <span data-chart="sparklines" data-height="32px" data-color="#647687">4,6,7,9,5,6,9,5,6,7,6,5,7,8,7,5,7,8,6,5</span>
                            <div class="header-ext-text color-steel"><span class="muted">Orders</span> 9,537</div>
                        </li>
                        <li>
                            <span data-chart="sparklines" data-height="32px" data-color="#6D8764">3,7,8,4,5,9,5,10,5,5,6,7,8,4,7,9,5,5,6,7</span>
                            <div class="header-ext-text color-olive"><span class="muted">Ballance</span> 4,5M$</div>
                        </li>
                    </ul>
                </header> <!--/ content header -->
                
                
                <!-- content page -->
                <article class="content-page">
                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-block">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">Widget</li>
                    </ul>
                    
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- row #1 -->
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- default widget -->
                                    <div class="widget" id="default-widget">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget title -->
                                            <h4 class="widget-title"><i class="aweso-apple"></i> Default Widget</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#default-widget" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /default widget -->
                                </div><!-- span left -->

                                <!-- span right -->
                                <div class="span6">
                                    <!-- widget style #1 -->
                                    <div class="widget border-orange" id="widget-style-1">
                                        <!-- widget header -->
                                        <div class="widget-header bg-orange">
                                            <!-- widget title -->
                                            <h4 class="widget-title"><i class="aweso-linux"></i> Widget Style #1</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="fullscreen" data-fullscreen="#widget-style-1" class="btn">
                                                    <i class="aweso-resize-full" data-toggle-icon="aweso-resize-full aweso-resize-small"></i>
                                                </button>
                                                <button data-toggle="collapse" data-collapse="#widget-style-1" class="btn">
                                                    <i class="aweso-minus color-orange" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget style #1 -->
                                </div><!-- span right -->
                            </div><!-- /row #1 -->



                            <!-- row #2 -->
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- widget style #2 -->
                                    <div class="widget border-cyan" id="widget-style-2">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-android"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Widget Style #2</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <div class="btn-group">
                                                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">More</a>
                                                    <ul class="dropdown-menu cyan pull-right" role="menu" aria-labelledby="dropdownMenu">
                                                        <li><a href="#">@new</a></li>
                                                        <li><a href="#">@open</a></li>
                                                        <li class="divider"></li>
                                                        <li class="disabled"><a href="#">@save</a></li>
                                                    </ul>
                                                </div>
                                                <button data-toggle="collapse" data-collapse="#widget-style-2" class="btn">
                                                    <i class="aweso-minus color-cyan" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget style #2 -->
                                </div><!-- span left -->

                                <!-- span right -->
                                <div class="span6">
                                    <!-- widget tabs -->
                                    <div class="widget border-lime" id="widget-tabs">
                                        <!-- widget header -->
                                        <div class="widget-header bg-lime">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-windows"></i></div>
                                            <!-- widget icon -->
                                            <h4 class="widget-title">Widget with tabs</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <ul class="nav nav-tabs">
                                                    <li class="active">
                                                        <a data-toggle="tab" href="#bent-tabs">@bent</a>
                                                    </li>
                                                    <li><a data-toggle="tab" href="#iin-tabs">@Iin</a></li>
                                                    <li><a data-toggle="tab" href="#stilearning-tabs">@stilearning</a></li>
                                                </ul>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="bent-tabs">
                                                    <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
                                                </div>
                                                <div class="tab-pane fade" id="iin-tabs">
                                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                                <div class="tab-pane fade" id="stilearning-tabs">
                                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown.</p>
                                                </div>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget tabs -->

                                </div><!-- span right -->
                            </div><!-- /row #2 -->


                            <!-- row #3 -->
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- widget pills -->
                                    <div class="widget border-magenta" id="widget-pills">
                                        <!-- widget header -->
                                        <div class="widget-header bg-magenta">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-css3"></i></div>
                                            <!-- widget icon -->
                                            <h4 class="widget-title">Widget with pills</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <ul class="nav nav-pills">
                                                    <li class="active">
                                                        <a data-toggle="tab" href="#bent-pills">@bent</a>
                                                    </li>
                                                    <li><a data-toggle="tab" href="#iin-pills">@Iin</a></li>
                                                    <li><a data-toggle="tab" href="#stilearning-pills">@stilearning</a></li>
                                                </ul>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <div class="tab-content">
                                                <div class="tab-pane fade in active" id="bent-pills">
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                                                </div>
                                                <div class="tab-pane fade" id="iin-pills">
                                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
                                                </div>
                                                <div class="tab-pane fade" id="stilearning-pills">
                                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
                                                </div>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget pills-->


                                    <!-- widget collapse true -->
                                    <div class="widget bg-steel" data-collapse="true" id="widget-coll">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-html5"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Double click me!</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-coll" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p class="lead">Collapse onload</p>
                                            <p>Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                                        </div><!-- /widget content -->
                                    </div><!-- /widget collapse -->
                                </div><!-- span left -->

                                <!-- span right -->
                                <div class="span6">
                                    <!-- widget themes -->
                                    <div class="widget bg-mauve" id="widget-themes">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magic"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Widget colors</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="close" data-close="#widget-themes" class="btn">
                                                    <i class="aweso-remove"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Define your colors by adding class <code>bg-lime</code>, <code>bg-black</code>, etc. on <code>widget</code></p>
                                            <h4>Choose a color:</h4>
                                            <div class="well">
                                                <ul class="theme-switcher" data-target="#widget-themes" data-target-class="widget">
                                                    <li><a href="#" class="bg-lime" data-theme="bg-lime">Lime</a></li>
                                                    <li><a href="#" class="bg-green" data-theme="bg-green">Green</a></li>
                                                    <li><a href="#" class="bg-emerald" data-theme="bg-emerald">Emerald</a></li>
                                                    <li><a href="#" class="bg-teal" data-theme="bg-teal">Teal</a></li>
                                                    <li><a href="#" class="bg-cyan" data-theme="bg-cyan">Cyan</a></li>
                                                    <li><a href="#" class="bg-cobalt" data-theme="bg-cobalt">Cobalt</a></li>
                                                    <li><a href="#" class="bg-indigo" data-theme="bg-indigo">Indigo</a></li>
                                                    <li><a href="#" class="bg-violet" data-theme="bg-violet">Violet</a></li>
                                                    <li><a href="#" class="bg-pink" data-theme="bg-pink">Pink</a></li>
                                                    <li><a href="#" class="bg-magenta" data-theme="bg-magenta">Magenta</a></li>
                                                    <li><a href="#" class="bg-crimson" data-theme="bg-crimson">Crimson</a></li>
                                                    <li><a href="#" class="bg-red" data-theme="bg-red">Red</a></li>
                                                    <li><a href="#" class="bg-orange" data-theme="bg-orange">Orange</a></li>
                                                    <li><a href="#" class="bg-amber" data-theme="bg-amber">Amber</a></li>
                                                    <li><a href="#" class="bg-yellow" data-theme="bg-yellow">Yellow</a></li>
                                                    <li><a href="#" class="bg-brown" data-theme="bg-brown">Brown</a></li>
                                                    <li><a href="#" class="bg-olive" data-theme="bg-olive">Olive</a></li>
                                                    <li><a href="#" class="bg-steel" data-theme="bg-steel">Steel</a></li>
                                                    <li><a href="#" class="bg-mauve" data-theme="bg-mauve">Mauve</a></li>
                                                    <li><a href="#" class="bg-taupe" data-theme="bg-taupe">Taupe</a></li>
                                                    <li><a href="#" class="bg-black" data-theme="bg-black">Black</a></li>
                                                    <li><a href="#" class="bg-silver" data-theme="bg-silver">Silver</a></li>
                                                </ul>
                                            </div>
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce.</p>
                                        </div><!-- /widget content -->
                                    </div><!-- widget themes -->
                                </div><!-- span right -->
                            </div><!-- /row #3 -->



                            <!-- row #4 -->
                            <h2 class="page-header">Anothers Custom Style</h2>
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- widget custom #1 -->
                                    <div class="widget border-black" id="widget-custom1">
                                        <!-- widget header -->
                                        <div class="widget-header bg-black">
                                            <!-- widget title -->
                                            <h4 class="widget-title">Widget Custom #1</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-custom1" class="btn bg-black">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content bg-cyan">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget custom #1 -->
                                </div><!-- span left -->

                                <!-- span right -->
                                <div class="span6">
                                    <!-- widget custom #2 -->
                                    <div class="widget border-cyan" id="widget-custom2">
                                        <!-- widget header -->
                                        <div class="widget-header bg-cyan">
                                            <!-- widget title -->
                                            <h4 class="widget-title">Widget Custom #2</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-custom2" class="btn bg-cyan">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content bg-silver">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget custom #2 -->
                                </div><!-- span right -->
                            </div><!-- /row #4 -->


                            <!-- row #5 -->
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- widget custom #3 -->
                                    <div class="widget" id="widget-custom3">
                                        <!-- widget header -->
                                        <div class="widget-header bordered-bottom bg-white">
                                            <!-- widget title -->
                                            <h4 class="widget-title"><i class="aweso-html5"></i> Widget Custom #3</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-custom3" class="btn bg-white">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content bg-white">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget custom #3 -->
                                </div><!-- span left -->

                                <!-- span right -->
                                <div class="span6">
                                    <!-- widget custom #4 -->
                                    <div class="widget no-border" id="widget-custom4">
                                        <!-- widget header -->
                                        <div class="widget-header bg-white bordered-bottom">
                                            <!-- widget title -->
                                            <h4 class="widget-title"><i class="aweso-css3"></i> Widget Custom #4</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-custom4" class="btn bg-white no-border">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content bordered-bottom bg-white">
                                            <p>Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est. Donec sit mollis imperdiet at tristique dapibus, qui vel in at fusce congue, mi arcu fusce, lacus vitae diam aliquam vel sed curabitur, auctor libero sed libero lectus pellentesque. Et sagittis ut vel dolor nullam proin, porta et morbi turpis vestibulum massa, ligula vestibulum nascetur wisi sed pharetra sem, lorem ipsam. Purus deserunt dignissim imperdiet, orci arcu felis, a aliquam sed.</p>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget custom #4 -->
                                </div><!-- span right -->
                            </div><!-- /row #5 -->

                        </div><!-- /content-inner -->
                    </div><!-- /main-page -->
                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/sparkline/jquery.sparkline.min.js"></script>
        
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript" src="js/metro-base.js"></script>
    </body>
</html>
